refactor: remove getTriggerDOMNode usage #79
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更新增了一个名为 Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as 父组件
participant Tour as Tour 组件
participant Placeholder as Placeholder 组件
participant Portal as Portal 组件
participant DOM as 占位 div
Parent->>Tour: 渲染 Tour，传递 props
Tour->>Placeholder: 渲染 Placeholder，传递 open、autoLock、getContainer、domRef、fallbackDOM 等
Placeholder->>Portal: 渲染 Portal，传递 open、autoLock、getContainer
Portal->>DOM: 渲染 div（占位元素），附加 domRef、className、style
Placeholder-->>Parent: 暴露 ref（指向 div 或 fallbackDOM）
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/Placeholder.tsxOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. src/Tour.tsxOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
😭 Deploy PR Preview 7faa0e7 failed. Build logs
🤖 By surge-preview |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/Tour.tsx (1)
243-260: 组件替换实现优雅，逻辑更集中使用
Placeholder组件替换原有的 Portal + div 结构，代码更加清晰和模块化。所有相关的样式、类名和DOM引用逻辑都集中在一处处理，使维护更容易。注意：代码中的
getContainer={getPopupContainer as any}使用了类型断言，虽然能正常工作，但可能在未来导致类型安全问题。考虑在Placeholder组件的接口定义中进行更精确的类型定义，避免使用any。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/Placeholder.tsx(1 hunks)src/Tour.tsx(3 hunks)
🔇 Additional comments (3)
src/Placeholder.tsx (1)
1-39: 代码实现清晰且符合组件化设计原则新增的
Placeholder组件很好地封装了占位元素的逻辑，使用了React.forwardRef和useImperativeHandle优雅地处理了 DOM 引用的暴露和回退机制。这种方式比之前直接使用 Portal + div 的结构更加灵活和可维护。几点建议：
- 考虑为
fallbackDOM添加默认值，减少使用组件时的必要配置- 可以为
style和className属性也提供默认值，增强组件的易用性src/Tour.tsx (2)
17-17: 导入新组件符合重构目标导入
Placeholder组件为移除getTriggerDOMNode使用奠定了基础，这与 PR 的目标一致。
205-207: 有效替代 getTriggerDOMNode 功能新增的
fallbackDOM函数很好地替代了原有的getTriggerDOMNode逻辑，保持了相同的功能：当目标元素不存在时使用document.body作为回退。代码简洁明了。
follow up react-component/select#1149
移除
getTriggerDOMNode后，rc-trigger中也将移除该方法支持。Summary by CodeRabbit
新功能
Placeholder组件，用于更灵活地渲染占位元素并支持自定义 DOM 引用及回退逻辑。重构
Tour组件现采用新的Placeholder组件替代原有的占位渲染方式，提升了组件结构的清晰度和可维护性。